<template>
  <div class="recharge_card">
    <header>
       <p @click='home'><img src="../assets/img/left@2x.png"></p>
       <p>充值</p>
       <p>记录</p>
    </header>
    <div class="card_wrap">
      <div class="the_card">
        <h1>我的加油卡</h1>
        <div class="card_cnt">
           <ul>
             <li>
                <span><img src="../assets/img/jyk_qt@2x.png" ></span>
                <span><img src="../assets/img/xz_button@2x.png" ></span>
             </li>
             <li>
                <span><img src="../assets/img/jyk_qt@2x.png" ></span>
                <span><img src="../assets/img/xz_button@2x.png" ></span>
             </li>
           </ul>
        </div>
      </div>
      <div class="recharge_list">
        <ul>
          <li>50元</li>
          <li>100元</li>
          <li>200元</li>
          <li>500元</li>
          <li>800元</li>
          <li>1000元</li>
        </ul>
      </div>
      <div class="agreed">
        <p>
          <img src="../assets/img/xz_jh@2x.png" >
          <span>我已阅读并同意满意行加油充值服务协议</span>
        </p>
      </div>
      <div class="right_now">立即充值</div>
      <div class="diuce">
        <p>充值说明</p>
        <ul>
          <li>1,gerggfndbxfbdgn</li>
          <li>2,gerggfndbxfbdgn</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'open_card',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  },
  methods:{
    home:function(){
        this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.recharge_card {
  height: 100%;
  background: #f7f7f7;
  header {
      width: 100%;
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(34,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        text-align: right;
        padding-right: 4%;
        .font(30,#fff);
      }
    }
    .card_wrap{
      .padding-left(24);
      .padding-right(24);
      .the_card {
        h1 {
          .line-height(48);
        }
        .card_cnt {
        .margin-top(15);
          ul {
            li {
              .px2rem(height,116);
              display: flex;
              align-items: center;
              .margin-bottom(36);
              span:nth-child(1){
                display: block;
                img {
                  .px2rem(height,116);
                  .px2rem(width,625);
                }
              }
              span:nth-child(2){
                display: block;
                .padding-left(15);
                img {
                  .px2rem(height,30);
                  .px2rem(width,30);
                }
              }
            }
          }
        }
      }
    .recharge_list {
      .margin-top(50);
      ul {
        display: flex;
        flex-wrap: wrap;
        .font(32,#9b9b9b);
        li {
          .px2rem(width,184);
          .padding(36,0,36,0);
          text-align: center;
          .margin(25,23,25,23);
          .border(1,solid,#9b9b9b);
          .border-radius(6);
        }
      }
    }
    .agreed {
      p {
        padding-left: 3%;
        .px2rem(height,27);
        display: flex;
        align-items: center;
        img {
          .px2rem(height,27);
          .px2rem(width,27);
        }
        span {
          .padding-left(10);
          color: #2bb663;
        }
      }
    }
    .right_now {
      .line-height(88);
      text-align: center;
      background: #ccc;
      color: #fff;
      .border-radius(6);
      .margin-top(35);
    }
    .diuce {
      p {
        .margin-top(58);
      }
      ul {
        li {
          .line-height(58);
        }
      }
    }
  }
}

</style>

